<!--
 tabs标签导航
 @Author: mosowe
 @Date:2023-01-10 14:11:26
-->

<template>
  <view
    :class="{
      'zo-tabs-component': true,
      sticky: isSticky,
      'lang-tabs': list.length > 5,
      center: props.center
    }"
    v-if="list && list.length">
    <view
      :class="[
        'zo-tabs-item',
        active === item.value ? 'active' : '',
        hideBottom ? 'no-bottom' : ''
      ]"
      v-for="(item, index) in props.list"
      :key="item.value"
      @click="choose(item, index)"
      :style="{
        color: active === item.value ? props.selectColor : props.color,
        '--tab-bottom-color': props.selectBottomColor
      }">
      <text>{{ item.label }}</text>
      <!-- 默认图标 -->
      <template v-if="item.icon && active !== item.value">
        <text
          class="icon-font"
          :class="item.icon"
          v-if="item.icon.indexOf('/') === -1"></text>
        <image
          :src="item.icon"
          class="icon-image"
          mode="aspectFit"
          v-else></image>
      </template>
      <!-- 选中图标 -->
      <template v-if="item.selectIcon && active === item.value">
        <text
          class="icon-font"
          v-if="item.selectIcon.indexOf('/') === -1"
          :class="item.selectIcon"></text>
        <image
          :src="item.selectIcon"
          class="icon-image"
          mode="aspectFit"
          v-else></image>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
/*
 * 标签列表
 * @click 选中事件，参数：item当前标签属性，index当前标签索引
 */

import { ref, watchEffect } from 'vue';

// props定义
interface PropsType {
  list: TabsListItem[] | null; // 列表
  modelValue?: string | number | undefined | null; // v-model值
  color?: string; // 默认字体颜色
  selectColor?: string; // 选中字体颜色
  selectBottomColor?: string; // 选中底部条颜色
  hideBottom?: boolean; // 是否隐藏底部条
  isSticky?: boolean; // 是否吸顶
  center?: boolean; // 是否居中
}
const props = withDefaults(defineProps<PropsType>(), {
  list: null,
  color: '#999999',
  selectColor: '#333333',
  selectBottomColor: '#37C880',
  hideBottom: false,
  isSticky: false
});

// emits
interface EmitsType {
  (e: 'update:modelValue', data: any): void;
  (e: 'click', item: TabsListItem, index: number): void; // 选中时触发事件
}
const emits = defineEmits<EmitsType>();

// 选中
const active = ref<any>(0);
watchEffect(() => {
  active.value = props.modelValue;
});
const choose = (item: TabsListItem, index: number) => {
  emits('update:modelValue', item.value);
  emits('click', item, index);
};
</script>

<style lang="scss" scoped>
.zo-tabs-component {
  flex: none;
  width: 100%;
  height: 90rpx;
  background-color: #ffffff;
  line-height: 90rpx;
  font-size: 28rpx;
  color: #999999;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  &.sticky {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
  }
  &.lang-tabs {
    .zo-tabs-item {
      min-width: 22%;
    }
  }
  &.center {
    display: flex;
    text-align: center;
    justify-content: space-around;
  }
  .zo-tabs-item {
    flex: none;
    display: inline-block;
    min-width: 20%;
    padding: 0 10rpx;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    white-space: nowrap;
    align-items: center;
    vertical-align: middle;
    .icon-image {
      width: 30rpx;
      height: 30rpx;
      vertical-align: middle;
    }
    &.active {
      color: #333333;
      font-weight: bold;
      &::after {
        display: block;
        content: '';
        width: 80rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background-color: var(--tab-bottom-color);
        position: absolute;
        left: 50%;
        bottom: 4rpx;
        transform: translateX(-50%);
      }
      .icon-font {
        font-weight: normal;
      }
    }
    &.no-bottom::after {
      display: none !important;
    }
  }
}
</style>
